<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 300px;
				height: 500px;
				border: 10px solid black;
				margin: 100px auto 0;
				position: relative;
			}

			#content {
				width: 1200px;
				height: 100%;
				position: absolute;
			}

			img {
				float: left;
				width: 300px;
				height: 500px;
				box-sizing: border-box;
				border: 10px ridge cyan;
			}

			.btns {
				position: relative;
				display: flex;
				justify-content: space-around;
				font-size: 30px;
				color: gray;
				font-weight: bolder;
				margin-top: 210px;
			}

			.btns>div {
				opacity: .7;
				cursor: pointer;
			}

			.pageControl {
				position: absolute;
				width: 100%;
				display: flex;
				/*height: 8px;*/
				/*background-color: yellow;*/
				bottom: 50px;
				justify-content: center;
			}

			.pageControl>span {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background-color: white;
				margin: 0 15px;
			}

			

			.pageControl>.red {
				background-color: red;
			}


		</style>
	</head>
	<body>

		<div id="box">
			<div id="content">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/1.jpg" alt="">
			</div>

		</div>
		
	</body>
</html>
<script>
	var boxDiv = document.getElementById('box');
	var contentDiv = document.getElementById('content');
	var left = 0;
	var timer = setInterval(move, 20);
	var timeout = null;

	function move() {
		left -= 5;
		contentDiv.style.left = left + 'px';
		if (left == -900) {
			left = 0;
			contentDiv.style.left = 0;
		}
		if (left % 300 == 0) {
			clearInterval(timer);
			timeout = setTimeout(function() {
				timer = setInterval(move, 20);
			}, 2000);
		}

	}

	boxDiv.onmouseover = function() {
		clearInterval(timer);
		clearTimeout(timeout);
	};

	boxDiv.onmouseout = function() {
		timer = setInterval(move, 20);
	};
	
	
	
</script>